---
{
	"title": "Geomap",
	"language": "en",
	"category": "Plugins",
	"description": "Displays a dynamic map over which information from additional sources can be overlaid.",
	"tag": "geomap",
	"parentdir": "geomap",
	"altLangPrefix": "geomap",
	"js": ["demo/client_functions"],
	"dateModified": "2025-11-18"
}
---
<span class="wb-prettify all-pre hide"></span>

<div class="row">
	<div class="col-md-6 pull-right col-xs-12">
		<aside class="alert alert-info">
			<h2 class="h3">Upgrade Notice</h2>
			<p>Since WET 4.0.31 we updated geomap to use to OpenLayers 3, as a result RSS and ATOM feeds are no longer supported. The configuration of some Static Map has been changed and a revised configuration is used to support tile source (XYZ) basemap. <a href="geomap-v4.0.30-en.html">Access at the working example prior v4.0.30</a>.</p>
		</aside>
	</div>
	<div class="col-md-auto">
		<p>Displays a dynamic map over which information from additional sources can be overlaid.</p>
		<ul>
			<li><a href="#dynamic">Dynamic map example</a></li>
			<li><a href="#static">Static Map example</a></li>
			<li><a href="#wms">WMS Map example</a></li>
			<li><a href="#ESRI-REST">ESRI REST basemap example</a></li>
			<li><a href="#osm">OSM basemap example</a></li>
			<li><a href="#tile-source">Tile Source (XYZ) basemap example</a></li>
			<li><a href="#filtering">Filtering example</a></li>
			<li><a href="#aoiZoomOnLoad">Zoom to AOI on page load (extent)</a></li>
			<li><a href="#singleItem">Merge label and legend symbol</a></li>
			<li><a href="#twoCols">Display legend labels over two columns</a></li>
			<li><a href="#topojson_select">TopoJSON map with selected style and popup</a></li>
		</ul>
	</div>
</div>

<section>
	<h2 id="dynamic">Dynamic map example</h2>

	<p>Since WET 4.0.31 we updated geomap to use to OpenLayers 3, as a result RSS and ATOM feeds are no longer supported. Many of the services that were used for this working example no longer exist and were removed. Please update the <code>config-en.js</code> as per provided <a href="./demo/config-en.js">example</a>.</p>

	<!-- GeomapStart -->
	<div id="sample_map"
		class="wb-geomap position scaleline geocoder geolocation aoi aoi-open"
		data-wb-geomap='{
			"layersFile": "demo/config-en{{environment.suffix}}.js",
			"tables": [{
				"id": "bbox",
				"zoom": true,
				"visible": false,
				"popups": true
			},{
				"id": "cities",
				"zoom": true,
				"tooltips": true,
				"tooltipText": "Population 2011",
				"popups": true,
				"visible": true,
				"popupsInfo": {
					"content": "<div style=\"white-space:nowrap;\"><strong>Census subdivision: </strong>_Census subdivision<br><strong>Population: </strong>_Population 2011</div>"
				},
				"style": {
					"type": "rule",
					"rule": [
					{
						"field": "Rank",
						"value": [3],
						"filter": "GREATER_THAN",
						"init": {
							"fillColor": "#e74c3c",
							"pointRadius": 2.6,
							"fillOpacity": 1.0,
							"strokeWidth": 8,
							"strokeColor": [ 231, 76, 60, 0.5 ]
						}
					},
					{
						"field": "Rank",
						"value": [2, 3],
						"filter": "BETWEEN",
						"init": {
							"fillColor": "#e74c3c",
							"pointRadius": 4,
							"fillOpacity": 1.0,
							"strokeWidth": 12,
							"strokeColor": [ 231, 76, 60, 0.5 ]
						}
					},
					{
						"field": "Rank",
						"value": [1],
						"filter": "EQUAL_TO",
						"init": {
							"fillColor": "#e74c3c",
							"pointRadius": 5.3,
							"fillOpacity": 1.0,
							"strokeWidth": 16,
							"strokeColor": [ 231, 76, 60, 0.5 ]
						}
					}
				]}
			}]
		}'>

		<div class="row">
			<div class="col-md-9 form-group">
				<!-- Insert Map Start (mandatory) -->
				<div class="wb-geomap-map"></div>
				<!-- Insert Map End -->
			</div>

			<!-- Insert Legend Start (optional) -->
			<section class="col-md-3 form-group">
				<div class="panel panel-default">
					<header class="panel-heading">
						<h3 class="panel-title">Legend</h3>
					</header>
					<div class="panel-body">
						<div class="wb-geomap-legend"></div>
					</div>
				</div>
			</section>
			<!-- Insert Legend End -->
		</div>

		<!-- Insert Layer Data Start (mandatory) -->
		<div class="row">
			<section>
				<div class="wb-geomap-layers col-md-12">
					<h3>Example - Inline Layer Data</h3>
					<p>Layers are created from the following tables. An attribute <code>data-geometry</code> to hold the geometry and an attribute <code>data-type</code> to hold the geometry type (wkt or bbox) are required for each row.</p>
					<div class="panel panel-default">
						<div class="panel-heading">
							<div class="panel-title">Points</div>
						</div>
						<div class="panel-body">
							<table id="cities" aria-label="Points" class="table wb-tables">
								<caption>Table of point geometries</caption>
								<thead>
									<tr>
										<th>Rank</th>
										<th>Census subdivision</th>
										<th>Population 2011</th>
									</tr>
								</thead>
								<tbody>
									<tr data-geometry="POINT (-79.3847 43.6476)" data-type="wkt">
										<td>1</td>
										<td><a href="https://www.wikipedia.org/wiki/Toronto" title="Toronto">Toronto</a></td>
										<td>2,615,060</td>
									</tr>
									<tr data-geometry="POINT (-73.56123 45.52927)" data-type="wkt">
										<td>2</td>
										<td><a href="https://www.wikipedia.org/wiki/Montreal" title="Montreal">Montreal</a></td>
										<td>1,649,519</td>
									</tr>
									<tr data-geometry="POINT (-114.05879 51.04668)" data-type="wkt">
										<td>3</td>
										<td><a href="https://www.wikipedia.org/wiki/Calgary" title="Calgary">Calgary</a></td>
										<td>1,096,833</td>
									</tr>
									<tr data-geometry="POINT (-75.68937 45.41072)" data-type="wkt">
										<td>4</td>
										<td><a href="https://www.wikipedia.org/wiki/Ottawa" title="Ottawa">Ottawa</a></td>
										<td>883,391</td>
									</tr>
									<tr data-geometry="POINT (-113.49590 53.53398)" data-type="wkt">
										<td>5</td>
										<td><a href="https://www.wikipedia.org/wiki/Edmonton" title="Edmonton">Edmonton</a></td>
										<td>812,201</td>
									</tr>
									<tr data-geometry="POINT (-79.65 43.60)" data-type="wkt">
										<td>6</td>
										<td><a href="https://www.wikipedia.org/wiki/Mississauga" title="Mississauga">Mississauga</a></td>
										<td>713,443</td>
									</tr>
									<tr data-geometry="POINT (-97.14352 49.89375)" data-type="wkt">
										<td>7</td>
										<td><a href="https://www.wikipedia.org/wiki/Winnipeg" title="Winnipeg">Winnipeg</a></td>
										<td>663,617</td>
									</tr>
									<tr data-geometry="POINT (-123.10091 49.26428)" data-type="wkt">
										<td>8</td>
										<td><a href="https://www.wikipedia.org/wiki/Vancouver" title="Vancouver">Vancouver</a></td>
										<td>603,502</td>
									</tr>
									<tr data-geometry="POINT (-79.76181 43.68686)" data-type="wkt">
										<td>9</td>
										<td><a href="https://www.wikipedia.org/wiki/Brampton" title="Brampton">Brampton</a></td>
										<td>523,911</td>
									</tr>
									<tr data-geometry="POINT (-79.86788 43.25717)" data-type="wkt">
										<td>10</td>
										<td><a href="https://www.wikipedia.org/wiki/Hamilton,_Ontario" title="Hamilton, Ontario">Hamilton</a></td>
										<td>519,949</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>

					<div class="panel panel-default">
						<div class="panel-heading">
							<div class="panel-title">Bounding Boxes</div>
						</div>
						<div class="panel-body">
							<table id="bbox" aria-label="Bounding Boxes" class="table table-condensed">
								<caption>Table of bounding box geometries</caption>
								<thead>
									<tr>
										<th>Title</th>
										<th>Geometry</th>
									</tr>
								</thead>
								<tbody>
									<tr data-geometry="-136, 61, -118, 70" data-type="bbox">
										<td>Report on 2011 field activities and collection of ground thermal and active layer data in the Mackenzie Corridor completed under Northwest Territories science licence #14918</td>
										<td>-136, 61, -118, 70</td>
									</tr>
									<tr data-geometry="-92.5, 72.75, -79, 75.5" data-type="bbox">
										<td>Dinoflagellate cysts from upper cretaceous-lower tertiary sections, Bylot and Devon Islands, Arctic Archipelago</td>
										<td>-92.5, 72.75, -79, 75.5</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
					<div class="row">
						<section class="col-md-12">
							<h3>Example - Remote &amp; File-based Layer Data</h3>
							<p>Layers are created from file-based formats, feeds, and web API's.</p>
						</section>
					</div>
				</div>
			</section>
		</div>
		<!-- Insert Layer Data End -->
	</div>
	<!-- GeomapEnd -->

	<section>
		<h3>Code</h3>
		<details class="mrgn-bttm-lg">
			<summary>View code</summary>
			<pre><code>&lt;!-- GeomapStart --&gt;
&lt;div id=&quot;sample_map&quot;
	class=&quot;wb-geomap position scaleline geocoder geolocation aoi aoi-open&quot;
	data-wb-geomap='{
		&quot;layersFile&quot;: &quot;demo/config-en{{environment.suffix}}.js&quot;,
		&quot;tables&quot;: [{
			&quot;id&quot;: &quot;bbox&quot;,
			&quot;tab&quot;: false,
			&quot;zoom&quot;: true,
			&quot;visible&quot;: false,
			&quot;popups&quot;: true
		},{
			&quot;id&quot;: &quot;cities&quot;,
			&quot;zoom&quot;: true,
			&quot;tab&quot;: false,
			&quot;popups&quot;: true,
			&quot;visible&quot;: true,
			&quot;popupsInfo&quot;: {
				&quot;id&quot;: &quot;citiesPopup&quot;,
				&quot;height&quot;: 200,
				&quot;width&quot;: 300,
				&quot;close&quot;: true,
				&quot;content&quot;: &quot;&lt;div style=\&quot;white-space:nowrap;\&quot;&gt;&lt;p&gt;&lt;strong&gt;Census subdivision: &lt;/strong&gt;_Census subdivision&lt;div&gt;&lt;a href=\&quot;#\&quot; class=\&quot;button\&quot; role=\&quot;button\&quot; title=\&quot;Zoom to city\&quot; aria-label=\&quot;Zoom to city\&quot; onclick=\&quot;wb.doc.zoomFeature()\&quot;&gt;Zoom to city&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;&quot;
			},
			&quot;style&quot;: {
				&quot;type&quot;: &quot;rule&quot;,
				&quot;rule&quot;: [
				{
					&quot;field&quot;: &quot;Rank&quot;,
					&quot;value&quot;: [3],
					&quot;filter&quot;: &quot;GREATER_THAN&quot;,
					&quot;init&quot;: {
						&quot;strokeColor&quot;: &quot;#0083f5&quot;,
						&quot;fillColor&quot;: &quot;#57a8f0&quot;,
						&quot;pointRadius&quot;: 6,
						&quot;fillOpacity&quot;: 0.80,
						&quot;strokeWidth&quot;: 1.0
					}
				},
				{
					&quot;field&quot;: &quot;Rank&quot;,
					&quot;value&quot;: [2, 3],
					&quot;filter&quot;: &quot;BETWEEN&quot;,
					&quot;init&quot;: {
						&quot;strokeColor&quot;: &quot;#F90&quot;,
						&quot;fillColor&quot;: &quot;#F90&quot;,
						&quot;pointRadius&quot;: 8,
						&quot;fillOpacity&quot;: 0.80,
						&quot;strokeWidth&quot;: 1.0
					}
				},
				{
					&quot;field&quot;: &quot;Rank&quot;,
					&quot;value&quot;: [1],
					&quot;filter&quot;: &quot;EQUAL_TO&quot;,
					&quot;init&quot;: {
						&quot;strokeColor&quot;: &quot;#F00&quot;,
						&quot;fillColor&quot;: &quot;#F00&quot;,
						&quot;pointRadius&quot;: 10,
						&quot;fillOpacity&quot;: 0.80,
						&quot;strokeWidth&quot;: 1.0
					}
				}
			]}
		}]
	}'&gt;

	&lt;div class=&quot;row&quot;&gt;
		&lt;div class=&quot;col-md-9&quot;&gt;
		&lt;!-- Insert Map Start (mandatory) --&gt;
		&lt;div class=&quot;wb-geomap-map&quot;&gt;&lt;/div&gt;
		&lt;!-- Insert Map End --&gt;
		&lt;/div&gt;

		&lt;!-- Insert Legend Start (optional) --&gt;
		&lt;section class=&quot;wb-geomap-legend col-md-3&quot;&gt;
			&lt;h3&gt;Legend&lt;/h3&gt;
		&lt;/section&gt;
		&lt;!-- Insert Legend End --&gt;
	&lt;/div&gt;

	&lt;div class=&quot;row&quot;&gt;
		&lt;section class=&quot;col-md-12&quot;&gt;
			&lt;h3&gt;Example - Remote &amp;amp; File-based Layer Data&lt;/h3&gt;
			&lt;p&gt;Layers are created from file-based formats, feeds, and web API's.&lt;/p&gt;
		&lt;/section&gt;
	&lt;/div&gt;

	&lt;!-- Insert Layer Data Start (mandatory) --&gt;
	&lt;div class=&quot;row&quot;&gt;
		&lt;section&gt;
			&lt;div class=&quot;wb-geomap-layers col-md-12&quot;&gt;
				&lt;h3&gt;Example - Inline Layer Data&lt;/h3&gt;
				&lt;p&gt;Layers are created from the following tables. An attribute &lt;em&gt;data-geometry&lt;/em&gt; to hold the geometry and an attribute &lt;em&gt;data-type&lt;/em&gt; to hold the geometry type (wkt or bbox) are required for each row.&lt;/p&gt;
				&lt;section&gt;
					&lt;h4&gt;Points&lt;/h4&gt;
					&lt;table id=&quot;cities&quot; aria-label=&quot;Points&quot; class=&quot;table wb-tables&quot;&gt;
						&lt;caption&gt;
							Table of point geometries.
						&lt;/caption&gt;
						&lt;thead&gt;
							&lt;tr&gt;
								&lt;th&gt;Rank&lt;/th&gt;
								&lt;th&gt;Census subdivision&lt;/th&gt;
								&lt;th&gt;Population 2011&lt;/th&gt;
							&lt;/tr&gt;
						&lt;/thead&gt;
						&lt;tbody&gt;
							&lt;tr data-geometry=&quot;POINT (-79.3847 43.6476)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;1&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Toronto&quot; title=&quot;Toronto&quot;&gt;Toronto&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;2615060&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr data-geometry=&quot;POINT (-73.56123 45.52927)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;2&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Montreal&quot; title=&quot;Montreal&quot;&gt;Montreal&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;1649519&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr data-geometry=&quot;POINT (-114.05879 51.04668)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;3&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Calgary&quot; title=&quot;Calgary&quot;&gt;Calgary&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;1096833&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr data-geometry=&quot;POINT (-75.68937 45.41072)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;4&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Ottawa&quot; title=&quot;Ottawa&quot;&gt;Ottawa&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;883391&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr data-geometry=&quot;POINT (-113.49590 53.53398)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;5&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Edmonton&quot; title=&quot;Edmonton&quot;&gt;Edmonton&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;812201&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr data-geometry=&quot;POINT (-79.65 43.60)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;6&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Mississauga&quot; title=&quot;Mississauga&quot;&gt;Mississauga&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;713443&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr data-geometry=&quot;POINT (-97.14352 49.89375)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;7&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Winnipeg&quot; title=&quot;Winnipeg&quot;&gt;Winnipeg&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;663617&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr data-geometry=&quot;POINT (-123.10091 49.26428)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;8&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Vancouver&quot; title=&quot;Vancouver&quot;&gt;Vancouver&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;603502&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr data-geometry=&quot;POINT (-79.76181 43.68686)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;9&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Brampton&quot; title=&quot;Brampton&quot;&gt;Brampton&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;523911&lt;/td&gt;
							&lt;/tr&gt;
							&lt;tr data-geometry=&quot;POINT (-79.86788 43.25717)&quot; data-type=&quot;wkt&quot;&gt;
								&lt;td&gt;10&lt;/td&gt;
								&lt;td&gt;&lt;a href=&quot;https://www.wikipedia.org/wiki/Hamilton,_Ontario&quot; title=&quot;Hamilton, Ontario&quot;&gt;Hamilton&lt;/a&gt;&lt;/td&gt;
								&lt;td&gt;519949&lt;/td&gt;
							&lt;/tr&gt;
						&lt;/tbody&gt;
					&lt;/table&gt;
				&lt;/section&gt;
			&lt;/div&gt;

			&lt;section class=&quot;col-md-12&quot;&gt;
				&lt;h4&gt;Bounding Boxes&lt;/h4&gt;
				&lt;table id=&quot;bbox&quot; aria-label=&quot;Bounding Boxes&quot; class=&quot;table table-condensed&quot;&gt;
					&lt;caption&gt;
						Table of bounding box geometries.
					&lt;/caption&gt;
					&lt;thead&gt;
						&lt;tr&gt;
							&lt;th&gt;Title&lt;/th&gt;
							&lt;th&gt;Geometry&lt;/th&gt;
						&lt;/tr&gt;
					&lt;/thead&gt;
					&lt;tbody&gt;
						&lt;tr data-geometry=&quot;-136, 61, -118, 70&quot; data-type=&quot;bbox&quot;&gt;
							&lt;td&gt;Report on 2011 field activities and collection of ground thermal and active layer data in the Mackenzie Corridor completed under Northwest Territories science licence #14918&lt;/td&gt;
							&lt;td&gt;-136, 61, -118, 70&lt;/td&gt;
						&lt;/tr&gt;
						&lt;tr data-geometry=&quot;-92.5, 72.75, -79, 75.5&quot; data-type=&quot;bbox&quot;&gt;
							&lt;td&gt;Dinoflagellate cysts from upper cretaceous-lower tertiary sections, Bylot and Devon Islands, Arctic Archipelago&lt;/td&gt;
							&lt;td&gt;-92.5, 72.75, -79, 75.5&lt;/td&gt;
						&lt;/tr&gt;
					&lt;/tbody&gt;
				&lt;/table&gt;
			&lt;/section&gt;
		&lt;/section&gt;
	&lt;/div&gt;
	&lt;!-- Insert Layer Data End --&gt;
&lt;/div&gt;
&lt;!-- GeomapEnd --&gt;</code></pre>
		</details>
	</section>
</section>

<section>
	<h2 id="static">Static Map example</h2>
	<p>Geomap can be configured to provide a static map ideally suited to display a location or bounding box extent.</p>

	<p>Since WET 4.0.31 we updated geomap to use to OpenLayers 3 and code in the <code>client_functions.js</code> has been changed. Please update the <code>client_functions.js</code> as per provided <a href="./demo/client_functions.js">example</a>. Static map that was using very similar configuration like before v4.0.30, which are deprecated, and as per demoed should continue to work. We recommend you to update your code like the following example.</p>

	<!-- GeomapStart -->
	<div id="location_map"
		class="wb-geomap static"
		data-wb-geomap='{
			"tables": [{
				"id": "addNRCan",
				"style": {
					"type": "symbol",
					"init": {
						"pointRadius": 12,
						"graphicName": "star",
						"strokeColor": "#FF0000",
						"fillColor": "#FF0000",
						"fillOpacity": 0.7
					}
				}
			}]
		}'>
		<div class="row">
			<div class="col-md-4">
				<!-- Insert Map Start (mandatory) -->
				<div class="wb-geomap-map"></div>
				<!-- Insert Map End -->
			</div>
			<!-- Insert Layer Data Start (mandatory) -->
			<div class="wb-geomap-layers col-md-4">
				<table id="addNRCan" aria-label="NRCan Ottawa office address" class="table">
					<caption class="wb-inv">Natural Resources Canada Ottawa office address</caption>
					<thead>
						<tr>
							<th>Address</th>
						</tr>
					</thead>
					<tbody>
						<tr data-geometry="POINT (-75.70535 45.3995)" data-type="wkt">
							<td>615 Booth St.,<br>Ottawa (ON),<br>Canada,<br>K1A 0E8</td>
						</tr>
					</tbody>
				</table>
			</div>
			<!-- Insert Layer Data End -->
		</div>
	</div>
	<!-- GeomapEnd -->

	<section>
		<h3>Code</h3>
		<details class="mrgn-tp-lg">
			<summary>View code</summary>
			<pre><code>&lt;!-- GeomapStart --&gt;
&lt;div id=&quot;location_map&quot;
	class=&quot;wb-geomap static&quot;
	data-wb-geomap='{
		&quot;tables&quot;: [{
			&quot;id&quot;: &quot;addNRCan&quot;,
			&quot;style&quot;: {
				&quot;type&quot;: &quot;symbol&quot;,
				&quot;init&quot;: {
					&quot;pointRadius&quot;: 12,
					&quot;graphicName&quot;: &quot;star&quot;,
					&quot;strokeColor&quot;: &quot;#FF0000&quot;,
					&quot;fillColor&quot;: &quot;#FF0000&quot;,
					&quot;fillOpacity&quot;: 0.7
				}
			}
		}]
	}'&gt;
	&lt;div class=&quot;row&quot;&gt;
		&lt;div class=&quot;col-md-4&quot;&gt;
			&lt;!-- Insert Map Start (mandatory) --&gt;
			&lt;div class=&quot;wb-geomap-map&quot;&gt;&lt;/div&gt;
			&lt;!-- Insert Map End --&gt;
		&lt;/div&gt;
		&lt;!-- Insert Layer Data Start (mandatory) --&gt;
		&lt;div class=&quot;wb-geomap-layers col-md-4&quot;&gt;
			&lt;table id=&quot;addNRCan&quot; aria-label=&quot;NRCan Ottawa office address&quot; class=&quot;table&quot;&gt;
				&lt;caption class=&quot;wb-inv&quot;&gt;Natural Resources Canada Ottawa office address&lt;/caption&gt;
				&lt;thead&gt;
					&lt;tr&gt;
						&lt;th&gt;Address&lt;/th&gt;
					&lt;/tr&gt;
				&lt;/thead&gt;
				&lt;tbody&gt;
					&lt;tr data-geometry=&quot;POINT (-75.70535 45.3995)&quot; data-type=&quot;wkt&quot;&gt;
						&lt;td&gt;615 Booth St.,&lt;br &gt;Ottawa (ON),&lt;br &gt;Canada,&lt;br &gt;K1A 0E8&lt;/td&gt;
					&lt;/tr&gt;
				&lt;/tbody&gt;
			&lt;/table&gt;
		&lt;/div&gt;
		&lt;!-- Insert Layer Data End --&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;!-- GeomapEnd --&gt;</code></pre>
		</details>
	</section>
</section>

<section>
	<h2 id="wms">WMS Map example</h2>
	<p>Geomap can be configured to use a WMS map as basemap. Configuration can be made in the config file in basemap property.</p>

	<!-- GeomapStart -->
	<div id="wms_map"
		class="wb-geomap"
		data-wb-geomap='{
			"layersFile": "demo/configwms-en{{environment.suffix}}.js"
		}'>
		<div class="row">
			<div class="col-md-4">
				<!-- Insert Map Start (mandatory) -->
				<div class="wb-geomap-map"></div>
				<!-- Insert Map End -->
			</div>
			<!-- Insert Layer Data Start (mandatory) -->
			<div class="wb-geomap-layers col-md-4">
			</div>
			<!-- Insert Layer Data End -->
		</div>
	</div>
	<!-- GeomapEnd -->

		<section>
		<h3>Code</h3>
		<details class="mrgn-tp-lg">
			<summary>View code</summary>
			<pre><code>&lt;!-- GeomapStart --&gt;
&lt;div id=&quot;location_map&quot;
	class=&quot;wb-geomap&quot;
	data-wb-geomap='{
		&quot;layersFile&quot;: &quot;demo/configwms-en{{environment.suffix}}.js&quot;
	}'&gt;
	&lt;div class=&quot;row&quot;&gt;
		&lt;div class=&quot;col-md-4&quot;&gt;
			&lt;!-- Insert Map Start (mandatory) --&gt;
			&lt;div class=&quot;wb-geomap-map&quot;&gt;&lt;/div&gt;
			&lt;!-- Insert Map End --&gt;
		&lt;/div&gt;
		&lt;!-- Insert Layer Data Start (mandatory) --&gt;
		&lt;div class=&quot;wb-geomap-layers col-md-4&quot;&gt;&lt;/div&gt;
		&lt;!-- Insert Layer Data End --&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;!-- GeomapEnd --&gt;</code></pre>
		</details>

		<details class="mrgn-tp-lg">
			<summary>View config file</summary>
			<pre><code>
var wet_boew_geomap = {
	// OPTIONAL: note that Geomap will provide a default basemap if not specified here.
	basemap : {
		title: &quot;WMS-Toporama&quot;,
		type: &quot;wms&quot;,
		url: &quot;http://wms.ess-ws.nrcan.gc.ca/wms/toporama_en&quot;,
		version: &quot;1.1.1&quot;,
		format: &quot;image/jpeg&quot;,
		layers: &quot;WMS-Toporama&quot;,
		mapOptions: {
			maxExtent: &quot;-141, 41, -52, 84&quot;,
			restrictedExtent: &quot;-141, 41, -52, 84&quot;,
			maxResolution: &quot;auto&quot;,
			projection: &quot;EPSG:4269&quot;,
			units: &quot;m&quot;,
			displayProjection: &quot;EPSG:4269&quot;,
			aspectRatio: 0.8
		}
	},
	overlays: []
};
		</code></pre>
		</details>
	</section>
</section>

<section>
	<h2 id="ESRI-REST">ESRI REST basemap example</h2>
	<p>Geomap can be configured to use an ESRI REST service as basemap. Configuration can be made in the config file in basemap property.</p>

	<!-- GeomapStart -->
	<div id="esri_map"
		class="wb-geomap"
		data-wb-geomap='{
			"layersFile": "demo/config-esri-en{{environment.suffix}}.js"
		}'>
		<div class="row">
			<div class="col-md-4">
				<!-- Insert Map Start (mandatory) -->
				<div class="wb-geomap-map"></div>
				<!-- Insert Map End -->
			</div>
			<!-- Insert Layer Data Start (mandatory) -->
			<div class="wb-geomap-layers col-md-4"></div>
			<!-- Insert Layer Data End -->
		</div>
	</div>
	<!-- GeomapEnd -->

		<section>
		<h3>Code</h3>
		<details class="mrgn-tp-lg">
			<summary>View code</summary>
			<pre><code>&lt;!-- GeomapStart --&gt;
&lt;div id=&quot;esri_map&quot;
	class=&quot;wb-geomap&quot;
	data-wb-geomap='{
		&quot;layersFile&quot;: &quot;demo/config-esri-en{{environment.suffix}}.js&quot;
	}'&gt;
	&lt;div class=&quot;row&quot;&gt;
		&lt;div class=&quot;col-md-4&quot;&gt;
			&lt;!-- Insert Map Start (mandatory) --&gt;
			&lt;div class=&quot;wb-geomap-map&quot;&gt;&lt;/div&gt;
			&lt;!-- Insert Map End --&gt;
		&lt;/div&gt;
		&lt;!-- Insert Layer Data Start (mandatory) --&gt;
		&lt;div class=&quot;wb-geomap-layers col-md-4&quot;&gt;&lt;/div&gt;
		&lt;!-- Insert Layer Data End --&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;!-- GeomapEnd --&gt;</code></pre>
		</details>

		<details class="mrgn-tp-lg">
			<summary>View config file</summary>
			<pre><code>
var wet_boew_geomap = {
	basemap : {
		title: &quot;Basic Map&quot;,
		type: &quot;esri&quot;,
		url: &quot;https://geoappext.nrcan.gc.ca/arcgis/rest/services/BaseMaps/provinces1c/MapServer/export&quot;,
		options: { singleTile: false, ratio: 1.0, projection: &quot;EPSG:3978&quot;, fractionalZoom: true },
		mapOptions: {
			maxExtent: &quot;-3000000.0, -800000.0, 4000000.0, 3900000.0&quot;,
			maxResolution: &quot;auto&quot;,
			projection: &quot;EPSG:3978&quot;,
			restrictedExtent: &quot;-3000000.0, -800000.0, 4000000.0, 3900000.0&quot;,
			units: &quot;m&quot;,
			displayProjection: &quot;EPSG:4269&quot;,
			numZoomLevels: 2
		}
	}
};
		</code></pre>
		</details>
	</section>
</section>

<section>
	<h2 id="osm">OSM basemap example</h2>
	<p>Geomap can be configured to use an OpenStreetMap (OSM) basemap. Configuration can be made in the config file in basemap property.</p>

	<!-- GeomapStart -->
	<div id="osm_map"
		class="wb-geomap"
		data-wb-geomap='{
			"layersFile": "demo/config-osm-en{{environment.suffix}}.js"
		}'>
		<div class="row">
			<div class="col-md-4">
				<!-- Insert Map Start (mandatory) -->
				<div class="wb-geomap-map"></div>
				<!-- Insert Map End -->
			</div>
			<!-- Insert Layer Data Start (mandatory) -->
			<div class="wb-geomap-layers col-md-4"></div>
			<!-- Insert Layer Data End -->
		</div>
	</div>
	<!-- GeomapEnd -->

	<section>
		<h3>Code</h3>
		<details class="mrgn-tp-lg">
			<summary>View code</summary>
			<pre><code>&lt;!-- GeomapStart --&gt;
&lt;div id=&quot;osm_map&quot;
	class=&quot;wb-geomap&quot;
	data-wb-geomap='{
		&quot;layersFile&quot;: &quot;demo/config-osm-en.js&quot;
	}'&gt;
	&lt;div class=&quot;row&quot;&gt;
		&lt;div class=&quot;col-md-4&quot;&gt;
			&lt;!-- Insert Map Start (mandatory) --&gt;
			&lt;div class=&quot;wb-geomap-map&quot;&gt;&lt;/div&gt;
			&lt;!-- Insert Map End --&gt;
		&lt;/div&gt;
		&lt;!-- Insert Layer Data Start (mandatory) --&gt;
		&lt;div class=&quot;wb-geomap-layers col-md-4&quot;&gt;&lt;/div&gt;
		&lt;!-- Insert Layer Data End --&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;!-- GeomapEnd --&gt;</code></pre>
		</details>

		<details class="mrgn-tp-lg">
			<summary>View config file</summary>
			<pre><code>
var wet_boew_geomap = {
	title: "OSM Map",
	type: "osm",
	mapOptions: {
		center: [ -52.7222765, 47.5410882 ],
		zoomLevel: 11
	}
};
		</code></pre>
		</details>
	</section>
</section>

<section>
	<h2 id="tile-source">Tile Source (XYZ) basemap example</h2>
	<p>Geomap can be configured to use an Tile Source (XYZ) basemap. Configuration can be made in the config file in basemap property.</p>
	<p>Prior to WET 4.0.31 the service that was used to create this working example has been retired. Please see the revised configuration below.</p>
	<!-- GeomapStart -->
	<div id="xyz_map"
		class="wb-geomap"
		data-wb-geomap='{
			"layersFile": "demo/config-xyz-en.js",
			"attribution": { "text":"Tiles Courtesy of &lt;a href=\"https://www.mapquest.com/\" target=\"_blank\"&gt;MapQuest&lt;/a&gt;", "href":"" }
		}'>
		<div class="row">
			<div class="col-md-4">
				<!-- Insert Map Start (mandatory) -->
				<div class="wb-geomap-map"></div>
				<!-- Insert Map End -->
			</div>
			<!-- Insert Layer Data Start (mandatory) -->
			<div class="wb-geomap-layers col-md-4"></div>
			<!-- Insert Layer Data End -->
		</div>
	</div>
	<!-- GeomapEnd -->

	<section>
		<h3>Code</h3>
		<details class="mrgn-tp-lg">
			<summary>View code</summary>
			<pre><code>&lt;!-- GeomapStart --&gt;
&lt;div id=&quot;xyz_map&quot;
	class=&quot;wb-geomap&quot;
	data-wb-geomap='{
		&quot;layersFile&quot;: &quot;demo/config-xyz-en.js&quot;
	}'&gt;
	&lt;div class=&quot;row&quot;&gt;
		&lt;div class=&quot;col-md-4&quot;&gt;
			&lt;!-- Insert Map Start (mandatory) --&gt;
			&lt;div class=&quot;wb-geomap-map&quot;&gt;&lt;/div&gt;
			&lt;!-- Insert Map End --&gt;
		&lt;/div&gt;
		&lt;!-- Insert Layer Data Start (mandatory) --&gt;
		&lt;div class=&quot;wb-geomap-layers col-md-4&quot;&gt;&lt;/div&gt;
		&lt;!-- Insert Layer Data End --&gt;
	&lt;/div&gt;
&lt;/div&gt;
&lt;!-- GeomapEnd --&gt;</code></pre>
		</details>

		<details class="mrgn-tp-lg">
			<summary>View config file</summary>
			<pre><code>
var wet_boew_geomap = {
	title: "Tile (XYZ) Source Map",
	type: "osm",
	url: [
		"//otile1.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png",
		"//otile2.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png",
		"//otile3.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png",
		"//otile4.mqcdn.com/tiles/1.0.0/map/${z}/${x}/${y}.png"
	],
	mapOptions: {
		projection: "EPSG:900913",
		center: [ -123, 49 ],
		zoomLevel: 5
	}
};
		</code></pre>
		</details>
	</section>
</section>

<section>
	<h2 id="filtering">Filtering example</h2>

	<form class="wb-geomap-filter form-inline mrgn-bttm-md" data-bind-to="sample_map_filter">
		<div class="form-group">
			<label for="gm_province">Province:</label>
			<select id="gm_province" class="form-control" data-filter="aoi">
				<!-- The dimension bellow are approximative for this demo purpose only -->
				<option selected value="64.097 -10.63 34.692 -177.659">Canada</option>
				<option value="60 -120 48 -139">British columbia</option>
				<option value="60 -110 49 -120">Alberta</option>
				<option value="POLYGON((-78.30545265676142 62.84207638792185,-79.79959328176142 51.57292655739278,-79.18435890676142 46.810536399556135,-76.45974953176142 45.655468008018055,-75.58084328176142 45.961790800827984,-74.87771828176142 45.47086564114406,-74.96560890676142 44.97562684884711,-71.44998390676142 44.97562684884711,-69.16482765676142 47.349194267123444,-68.19803078176142 47.349194267123444,-64.33084328176142 48.35181916125691,-55.80545265676142 52.00783331541157,-67.31912453176142 52.16984334247954,-64.24295265676142 60.85236662687351,-78.30545265676142 62.84207638792185))">Québec</option>
			</select>
		</div>
		<div class="form-group">
			<label for="gm_layer">Layer:</label>
			<select id="gm_layer" class="form-control" data-filter="layer">
				<option value="Points" selected>Points</option>
				<option value="KML">KML</option>
				<option value="TopoJSON (World 110m)">TopoJSON (World 110m)</option>
				<option value="">(All)</option>
			</select>
		</div>
		<button class="btn btn-primary" aria-controls="sample_map_filter" type="submit">Filter</button>
		<button class="btn btn-link btn-sm p-0 pl-2" type="reset">Reset to defaults</button>
	</form>
	<div id="sample_map_filter"
		class="wb-geomap position scaleline geocoder geolocation"
		data-wb-geomap='{
			"tables": [{
				"id": "cities_forFilterSample",
				"zoom": true,
				"tooltips": true,
				"tooltipText": "Population 2011",
				"popups": true,
				"visible": true,
				"popupsInfo": {
					"content": "<div style=\"white-space:nowrap;\"><strong>Census subdivision: </strong>_Census subdivision<br><strong>Population: </strong>_Population 2011</div>"
				},
				"style": {
					"type": "rule",
					"rule": [
					{
						"field": "Rank",
						"value": [3],
						"filter": "GREATER_THAN",
						"init": {
							"fillColor": "#e74c3c",
							"pointRadius": 2.6,
							"fillOpacity": 1.0,
							"strokeWidth": 8,
							"strokeColor": [ 231, 76, 60, 0.5 ]
						}
					},
					{
						"field": "Rank",
						"value": [2, 3],
						"filter": "BETWEEN",
						"init": {
							"fillColor": "#e74c3c",
							"pointRadius": 4,
							"fillOpacity": 1.0,
							"strokeWidth": 12,
							"strokeColor": [ 231, 76, 60, 0.5 ]
						}
					},
					{
						"field": "Rank",
						"value": [1],
						"filter": "EQUAL_TO",
						"init": {
							"fillColor": "#e74c3c",
							"pointRadius": 5.3,
							"fillOpacity": 1.0,
							"strokeWidth": 16,
							"strokeColor": [ 231, 76, 60, 0.5 ]
						}
					}
				]}
			}],
			"overlays": [
				{
					"title": "KML",
					"caption": "This data is extracted from the <a href=\"http://geogratis.gc.ca/api/en/nrcan-rncan/ess-sst/457ede2f-fd65-5936-ab60-3fe71da0e98b\">Principal mineral areas of Canada</a> publication.",
					"type": "kml",
					"url": "demo/producing-mines.kml",
					"visible": false,
					"datatable": true,
					"tooltips": true,
					"tooltipText": "Operation",
					"popups": true,
					"attributes": {
						"Type_": "Type",
						"OwnersE": "Owner",
						"OperationE": "Operation",
						"ComGroupE": "Commodity Group",
						"CommodityE": "Commodity"
					},
					"style": {
						"type": "unique",
						"field": "Type",
						"init": {
							"Coal": {
								"externalGraphic": "",
								"fillOpacity": "1",
								"graphicWidth": "25",
								"name": "Coal mines"
							},
							"Metal mines and mills": {
								"externalGraphic": "",
								"fillOpacity": "1",
								"graphicWidth": "25",
								"name": "Metal mines"
							},
							"Industrial minerals": {
								"externalGraphic": "",
								"fillOpacity": "1",
								"graphicWidth": "25",
								"name": "Nonmetal Mines"
							},
							"Oil Sands": {
								"externalGraphic": "",
								"fillOpacity": "1",
								"graphicWidth": "25",
								"name": "Oil sands mines"
							}
						},
						"select": {
							"externalGraphic": "",
							"graphicOpacity": "1"
						}
					}
				},
				{
					"title": "TopoJSON (World 110m)",
					"caption": "This is a sample dataset loaded from a remote TopoJSON resource.",
					"type": "topojson",
					"url": "demo/topojson.json",
					"accessible": false,
					"visible": false,
					"style": {
						"strokeColor": "#3399ff",
						"strokeWidth": 2.0
					}
				}
			]
		}'>

		<div class="row">
			<div class="col-md-9 form-group">
				<div class="wb-geomap-map"></div>
			</div>
			<section class="col-md-3 form-group">
				<div class="panel panel-default">
					<header class="panel-heading">
						<h3 class="panel-title">Legend</h3>
					</header>
					<div class="panel-body">
						<div class="wb-geomap-legend"></div>
					</div>
				</div>
			</section>
		</div>


		<div class="wb-geomap-layers">
			<div class="panel panel-default">
				<div class="panel-heading">
					<div class="panel-title">Points</div>
				</div>
				<div class="panel-body">
					<table id="cities_forFilterSample" aria-label="Points" class="table wb-tables">
						<caption>Table of point geometries</caption>
						<thead>
							<tr>
								<th>Rank</th>
								<th>Census subdivision</th>
								<th>Population 2011</th>
							</tr>
						</thead>
						<tbody>
							<tr data-geometry="POINT (-79.3847 43.6476)" data-type="wkt">
								<td>1</td>
								<td><a href="https://www.wikipedia.org/wiki/Toronto" title="Toronto">Toronto</a></td>
								<td>2,615,060</td>
							</tr>
							<tr data-geometry="POINT (-73.56123 45.52927)" data-type="wkt">
								<td>2</td>
								<td><a href="https://www.wikipedia.org/wiki/Montreal" title="Montreal">Montreal</a></td>
								<td>1,649,519</td>
							</tr>
							<tr data-geometry="POINT (-114.05879 51.04668)" data-type="wkt">
								<td>3</td>
								<td><a href="https://www.wikipedia.org/wiki/Calgary" title="Calgary">Calgary</a></td>
								<td>1,096,833</td>
							</tr>
							<tr data-geometry="POINT (-75.68937 45.41072)" data-type="wkt">
								<td>4</td>
								<td><a href="https://www.wikipedia.org/wiki/Ottawa" title="Ottawa">Ottawa</a></td>
								<td>883,391</td>
							</tr>
							<tr data-geometry="POINT (-113.49590 53.53398)" data-type="wkt">
								<td>5</td>
								<td><a href="https://www.wikipedia.org/wiki/Edmonton" title="Edmonton">Edmonton</a></td>
								<td>812,201</td>
							</tr>
							<tr data-geometry="POINT (-79.65 43.60)" data-type="wkt">
								<td>6</td>
								<td><a href="https://www.wikipedia.org/wiki/Mississauga" title="Mississauga">Mississauga</a></td>
								<td>713,443</td>
							</tr>
							<tr data-geometry="POINT (-97.14352 49.89375)" data-type="wkt">
								<td>7</td>
								<td><a href="https://www.wikipedia.org/wiki/Winnipeg" title="Winnipeg">Winnipeg</a></td>
								<td>663,617</td>
							</tr>
							<tr data-geometry="POINT (-123.10091 49.26428)" data-type="wkt">
								<td>8</td>
								<td><a href="https://www.wikipedia.org/wiki/Vancouver" title="Vancouver">Vancouver</a></td>
								<td>603,502</td>
							</tr>
							<tr data-geometry="POINT (-79.76181 43.68686)" data-type="wkt">
								<td>9</td>
								<td><a href="https://www.wikipedia.org/wiki/Brampton" title="Brampton">Brampton</a></td>
								<td>523,911</td>
							</tr>
							<tr data-geometry="POINT (-79.86788 43.25717)" data-type="wkt">
								<td>10</td>
								<td><a href="https://www.wikipedia.org/wiki/Hamilton,_Ontario" title="Hamilton, Ontario">Hamilton</a></td>
								<td>519,949</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>

	<section>
		<h3>Code</h3>
		<details class="mrgn-tp-lg">
			<summary>View code</summary>
			<pre><code>&lt;form class="wb-geomap-filter form-inline mrgn-bttm-md" data-bind-to="sample_map_filter"&gt;
	&lt;div class="form-group"&gt;
		&lt;label for="gm_province"&gt;Province:&lt;/label&gt;
		&lt;select id="gm_province" class="form-control" data-filter="aoi"&gt;
			&lt;!-- The dimension bellow are approximative for this demo purpose only --&gt;
			&lt;option selected value="64.097 -10.63 34.692 -177.659"&gt;Canada&lt;/option&gt;
			&lt;option value="60 -120 48 -139"&gt;British columbia&lt;/option&gt;
			&lt;option value="60 -110 49 -120"&gt;Alberta&lt;/option&gt;
			&lt;option value="POLYGON((-78.30545265676142 62.84207638792185,-79.79959328176142 51.57292655739278,-79.18435890676142 46.810536399556135,-76.45974953176142 45.655468008018055,-75.58084328176142 45.961790800827984,-74.87771828176142 45.47086564114406,-74.96560890676142 44.97562684884711,-71.44998390676142 44.97562684884711,-69.16482765676142 47.349194267123444,-68.19803078176142 47.349194267123444,-64.33084328176142 48.35181916125691,-55.80545265676142 52.00783331541157,-67.31912453176142 52.16984334247954,-64.24295265676142 60.85236662687351,-78.30545265676142 62.84207638792185))"&gt;Québec&lt;/option&gt;
		&lt;/select&gt;
	&lt;/div&gt;
	&lt;div class="form-group"&gt;
		&lt;label for="gm_layer"&gt;Layer:&lt;/label&gt;
		&lt;select id="gm_layer" class="form-control" data-filter="layer"&gt;
			&lt;option value="Points" selected&gt;Points&lt;/option&gt;
			&lt;option value="KML"&gt;KML&lt;/option&gt;
			&lt;option value="TopoJSON (World 110m)"&gt;TopoJSON (World 110m)&lt;/option&gt;
			&lt;option value=""&gt;(All)&lt;/option&gt;
		&lt;/select&gt;
	&lt;/div&gt;
	&lt;button class="btn btn-primary" aria-controls="sample_map_filter" type="submit"&gt;Filter&lt;/button&gt;
	&lt;button class="btn btn-link" type="reset"&gt;Reset page to defaults&lt;/button&gt;
&lt;/form&gt;
&lt;div id="sample_map_filter"
	class="wb-geomap position scaleline geocoder geolocation"
	data-wb-geomap='{
		"tables": [{
			"id": "cities_forFilterSample",
			"zoom": true,
			"tooltips": true,
			"tooltipText": "Population 2011",
			"popups": true,
			"visible": true,
			"popupsInfo": {
				"content": "&lt;div style=\"white-space:nowrap;\"&gt;&lt;strong&gt;Census subdivision: &lt;/strong&gt;_Census subdivision&lt;br/&gt;&lt;strong&gt;Population: &lt;/strong&gt;_Population 2011&lt;/div&gt;"
			},
			"style": {
				"type": "rule",
				"rule": [
				{
					"field": "Rank",
					"value": [3],
					"filter": "GREATER_THAN",
					"init": {
						"fillColor": "#e74c3c",
						"pointRadius": 2.6,
						"fillOpacity": 1.0,
						"strokeWidth": 8,
						"strokeColor": [ 231, 76, 60, 0.5 ]
					}
				},
				{
					"field": "Rank",
					"value": [2, 3],
					"filter": "BETWEEN",
					"init": {
						"fillColor": "#e74c3c",
						"pointRadius": 4,
						"fillOpacity": 1.0,
						"strokeWidth": 12,
						"strokeColor": [ 231, 76, 60, 0.5 ]
					}
				},
				{
					"field": "Rank",
					"value": [1],
					"filter": "EQUAL_TO",
					"init": {
						"fillColor": "#e74c3c",
						"pointRadius": 5.3,
						"fillOpacity": 1.0,
						"strokeWidth": 16,
						"strokeColor": [ 231, 76, 60, 0.5 ]
					}
				}
			]}
		}],
		"overlays": [
			{
				"title": "KML",
				"caption": "This data is extracted from the &lt;a href=\"http://geogratis.gc.ca/api/en/nrcan-rncan/ess-sst/457ede2f-fd65-5936-ab60-3fe71da0e98b\"&gt;Principal mineral areas of Canada&lt;/a&gt; publication.",
				"type": "kml",
				"url": "demo/producing-mines.kml",
				"visible": false,
				"datatable": true,
				"tooltips": true,
				"tooltipText": "Operation",
				"popups": true,
				"attributes": {
					"Type_": "Type",
					"OwnersE": "Owner",
					"OperationE": "Operation",
					"ComGroupE": "Commodity Group",
					"CommodityE": "Commodity"
				},
				"style": {
					"type": "unique",
					"field": "Type",
					"init": {
						"Coal": {
							"externalGraphic": "",
							"fillOpacity": "1",
							"graphicWidth": "25",
							"name": "Coal mines"
						},
						"Metal mines and mills": {
							"externalGraphic": "",
							"fillOpacity": "1",
							"graphicWidth": "25",
							"name": "Metal mines"
						},
						"Industrial minerals": {
							"externalGraphic": "",
							"fillOpacity": "1",
							"graphicWidth": "25",
							"name": "Nonmetal Mines"
						},
						"Oil Sands": {
							"externalGraphic": "",
							"fillOpacity": "1",
							"graphicWidth": "25",
							"name": "Oil sands mines"
						}
					},
					"select": {
						"externalGraphic": "",
						"graphicOpacity": "1"
					}
				}
			},
			{
				"title": "TopoJSON (World 110m)",
				"caption": "This is a sample dataset loaded from a remote TopoJSON resource.",
				"type": "topojson",
				"url": "demo/topojson.json",
				"accessible": false,
				"visible": false,
				"style": {
					"strokeColor": "#3399ff",
					"strokeWidth": 2.0
				}
			}
		]
	}'&gt;

	&lt;div class="row"&gt;
		&lt;div class="col-md-9 form-group"&gt;
			&lt;div class="wb-geomap-map"&gt;&lt;/div&gt;
		&lt;/div&gt;
		&lt;section class="col-md-3 form-group"&gt;
			&lt;div class="panel panel-default"&gt;
				&lt;header class="panel-heading"&gt;
					&lt;h3 class="panel-title"&gt;Legend&lt;/h3&gt;
				&lt;/header&gt;
				&lt;div class="panel-body"&gt;
					&lt;div class="wb-geomap-legend"&gt;&lt;/div&gt;
				&lt;/div&gt;
			&lt;/div&gt;
		&lt;/section&gt;
	&lt;/div&gt;


	&lt;div class="wb-geomap-layers"&gt;
		&lt;div class="panel panel-default"&gt;
			&lt;div class="panel-heading"&gt;
				&lt;div class="panel-title"&gt;Points&lt;/div&gt;
			&lt;/div&gt;
			&lt;div class="panel-body"&gt;
				&lt;table id="cities_forFilterSample" aria-label="Points" class="table wb-tables"&gt;
					&lt;caption&gt;Table of point geometries&lt;/caption&gt;
					&lt;thead&gt;
						&lt;tr&gt;
							&lt;th&gt;Rank&lt;/th&gt;
							&lt;th&gt;Census subdivision&lt;/th&gt;
							&lt;th&gt;Population 2011&lt;/th&gt;
						&lt;/tr&gt;
					&lt;/thead&gt;
					&lt;tbody&gt;
						&lt;tr data-geometry="POINT (-79.3847 43.6476)" data-type="wkt"&gt;
							&lt;td&gt;1&lt;/td&gt;
							&lt;td&gt;&lt;a href="https://www.wikipedia.org/wiki/Toronto" title="Toronto"&gt;Toronto&lt;/a&gt;&lt;/td&gt;
							&lt;td&gt;2,615,060&lt;/td&gt;
						&lt;/tr&gt;
						&lt;tr data-geometry="POINT (-73.56123 45.52927)" data-type="wkt"&gt;
							&lt;td&gt;2&lt;/td&gt;
							&lt;td&gt;&lt;a href="https://www.wikipedia.org/wiki/Montreal" title="Montreal"&gt;Montreal&lt;/a&gt;&lt;/td&gt;
							&lt;td&gt;1,649,519&lt;/td&gt;
						&lt;/tr&gt;
						&lt;tr data-geometry="POINT (-114.05879 51.04668)" data-type="wkt"&gt;
							&lt;td&gt;3&lt;/td&gt;
							&lt;td&gt;&lt;a href="https://www.wikipedia.org/wiki/Calgary" title="Calgary"&gt;Calgary&lt;/a&gt;&lt;/td&gt;
							&lt;td&gt;1,096,833&lt;/td&gt;
						&lt;/tr&gt;
						&lt;tr data-geometry="POINT (-75.68937 45.41072)" data-type="wkt"&gt;
							&lt;td&gt;4&lt;/td&gt;
							&lt;td&gt;&lt;a href="https://www.wikipedia.org/wiki/Ottawa" title="Ottawa"&gt;Ottawa&lt;/a&gt;&lt;/td&gt;
							&lt;td&gt;883,391&lt;/td&gt;
						&lt;/tr&gt;
						&lt;tr data-geometry="POINT (-113.49590 53.53398)" data-type="wkt"&gt;
							&lt;td&gt;5&lt;/td&gt;
							&lt;td&gt;&lt;a href="https://www.wikipedia.org/wiki/Edmonton" title="Edmonton"&gt;Edmonton&lt;/a&gt;&lt;/td&gt;
							&lt;td&gt;812,201&lt;/td&gt;
						&lt;/tr&gt;
						&lt;tr data-geometry="POINT (-79.65 43.60)" data-type="wkt"&gt;
							&lt;td&gt;6&lt;/td&gt;
							&lt;td&gt;&lt;a href="https://www.wikipedia.org/wiki/Mississauga" title="Mississauga"&gt;Mississauga&lt;/a&gt;&lt;/td&gt;
							&lt;td&gt;713,443&lt;/td&gt;
						&lt;/tr&gt;
						&lt;tr data-geometry="POINT (-97.14352 49.89375)" data-type="wkt"&gt;
							&lt;td&gt;7&lt;/td&gt;
							&lt;td&gt;&lt;a href="https://www.wikipedia.org/wiki/Winnipeg" title="Winnipeg"&gt;Winnipeg&lt;/a&gt;&lt;/td&gt;
							&lt;td&gt;663,617&lt;/td&gt;
						&lt;/tr&gt;
						&lt;tr data-geometry="POINT (-123.10091 49.26428)" data-type="wkt"&gt;
							&lt;td&gt;8&lt;/td&gt;
							&lt;td&gt;&lt;a href="https://www.wikipedia.org/wiki/Vancouver" title="Vancouver"&gt;Vancouver&lt;/a&gt;&lt;/td&gt;
							&lt;td&gt;603,502&lt;/td&gt;
						&lt;/tr&gt;
						&lt;tr data-geometry="POINT (-79.76181 43.68686)" data-type="wkt"&gt;
							&lt;td&gt;9&lt;/td&gt;
							&lt;td&gt;&lt;a href="https://www.wikipedia.org/wiki/Brampton" title="Brampton"&gt;Brampton&lt;/a&gt;&lt;/td&gt;
							&lt;td&gt;523,911&lt;/td&gt;
						&lt;/tr&gt;
						&lt;tr data-geometry="POINT (-79.86788 43.25717)" data-type="wkt"&gt;
							&lt;td&gt;10&lt;/td&gt;
							&lt;td&gt;&lt;a href="https://www.wikipedia.org/wiki/Hamilton,_Ontario" title="Hamilton, Ontario"&gt;Hamilton&lt;/a&gt;&lt;/td&gt;
							&lt;td&gt;519,949&lt;/td&gt;
						&lt;/tr&gt;
					&lt;/tbody&gt;
				&lt;/table&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/div&gt;</code></pre>
		</details>
	</section>
</section>

<section id="aoiZoomOnLoad">
	<h2>Zoom to AOI on page load (extent)</h2>

	<form class="wb-geomap-filter form-inline mrgn-bttm-md" data-bind-to="bc-geomap">
		<div class="form-group">
			<label for="zoomBCArea">B.C. Regions:</label>
			<select class="form-control" data-filter="aoi" id="zoomBCArea">
				<option value="63 -110 50 -128" selected>Select a region</option>
				<option value="61 -124 55.33 -140.6">North</option>
				<option value="50.802 -123.316 48.312 -128.578">Vancouver Island and Coast</option>
				<option value="50.2806 -121.7203 49.0199 -124.4421">Lower Mainland</option>
				<option value="52.4999 -118.5493 48.9964 -114.0535">Southern Interior</option>
			</select>
		</div>
		<button aria-controls="bc-geomap" class="btn btn-primary" type="submit">Filter</button>
		<button class="btn btn-link" type="reset">Reset page to defaults</button>
	</form>
	<div class="wb-geomap" id="bc-geomap" data-wb-geomap='{
		"mapExtent": "63, -110, 50, -128"
	}'>
		<div class="wb-geomap-map"></div>
	</div>

	<section>
		<h3>Code</h3>
		<details>
			<summary>View code</summary>
			<pre><code>&lt;form class="wb-geomap-filter form-inline mrgn-bttm-md" data-bind-to="bc-geomap"&gt;
	&lt;div class="form-group"&gt;
		&lt;label for="zoomBCArea"&gt;B.C. Regions:&lt;/label&gt;
		&lt;select class="form-control" data-filter="aoi" id="zoomBCArea"&gt;
			&lt;option value="63 -110 50 -128" selected&gt;Select a region&lt;/option&gt;
			&lt;option value="61 -124 55.33 -140.6"&gt;North&lt;/option&gt;
			&lt;option value="50.802 -123.316 48.312 -128.578"&gt;Vancouver Island and Coast&lt;/option&gt;
			&lt;option value="50.2806 -121.7203 49.0199 -124.4421"&gt;Lower Mainland&lt;/option&gt;
			&lt;option value="52.4999 -118.5493 48.9964 -114.0535"&gt;Southern Interior&lt;/option&gt;
		&lt;/select&gt;
	&lt;/div&gt;
	&lt;button aria-controls="bc-geomap" class="btn btn-primary" type="submit"&gt;Filter&lt;/button&gt;
	&lt;button class="btn btn-link" type="reset"&gt;Reset page to defaults&lt;/button&gt;
&lt;/form&gt;
&lt;div class="wb-geomap" id="bc-geomap" data-wb-geomap='{
	"mapExtent": "63, -110, 50, -128"
}'&gt;
	&lt;div class="wb-geomap-map"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
		</details>
	</section>
</section>

<section id="singleItem">
	<h2>Merge label and legend symbol</h2>
	<p>When the legend layer only has one legend item, hide the legend item and only keep the label with the icon.</p>
	<div class="wb-geomap legend-label-only" id="geomap_single" data-wb-geomap='{
		"mapExtent": "63, -110, 50, -128",
		"overlays": [
			{
				"title": "Business Scale Up and Productivity",
				"caption": "This interactive map shows projects across B.C. that received funding from PacifiCan&apos;s economic development programs.",
				"type": "kml",
				"url": "demo/BusinessScaleProductivity_en.kml",
				"datatable": true,
				"attributes": {
					"Program": "Program",
					"Project": "Project"
				},
				"style": {
					"type": "unique",
					"field": "Program",
					"init": {
						"Business Scale Up": {
							"externalGraphic": "",
							"graphicOpacity": "1",
							"graphicWidth": "32",
							"graphicHeight": "32"
						},
						"Business Productivity": {
							"externalGraphic": "",
							"graphicOpacity": "1",
							"graphicWidth": "32",
							"graphicHeight": "32"
						}
					}
				}
			},
			{
				"title": "Regional Innovation Ecosystems",
				"caption": "This interactive map shows projects across B.C. that received funding from PacifiCan&apos;s economic development programs.",
				"type": "kml",
				"url": "demo/RegionalInnovationEcosystem_en.kml",
				"datatable": true,
				"attributes": {
					"Program": "Program",
					"Project": "Project"
				},
				"style": {
					"type": "unique",
					"field": "Program",
					"init": {
						"Regional Innovation Ecosystems": {
							"externalGraphic": "",
							"graphicOpacity": "1",
							"graphicWidth": "32",
							"graphicHeight": "32"
						}
					}
				}
			},
			{
				"title": "CEDD (formerly known as WDP)",
				"caption": "This interactive map shows projects across B.C. that received funding from PacifiCan&apos;s economic development programs.",
				"type": "kml",
				"url": "demo/WesternDiversificationProgram_en.kml",
				"datatable": true,
				"attributes": {
					"Program": "Program",
					"Project": "Project"
				},
				"style": {
					"type": "unique",
					"field": "Program",
					"init": {
						"CEDD (formerly known as WDP)": {
							"externalGraphic": "",
							"graphicOpacity": "1",
							"graphicWidth": "32",
							"graphicHeight": "32"
						}
					}
				}
			}
		]
	}'>
		<div class="row mrgn-bttm-lg">
			<div class="col-md-8">
				<div class="wb-geomap-map"></div>
			</div>
			<div class="col-md-4">
				<div class="panel panel-default">
					<header class="panel-heading">
						<h3 class="panel-title">Legend</h3>
					</header>
					<div class="panel-body">
						<p class="”h4”"><strong>Select from following PacifiCan programs to see funded projects across British Columbia:</strong></p>
						<div class="wb-geomap-legend"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="wb-geomap-layers"></div>
	</div>
</section>

<section id="twoCols">
	<h2>Display legend labels over two columns</h2>
	<div class="wb-geomap legend-label-only two-cols-legend" id="geomap_twocols" data-wb-geomap='{
		"mapExtent": "63, -110, 50, -128",
		"overlays": [
			{
				"title": "Business Scale Up and Productivity",
				"caption": "This interactive map shows projects across B.C. that received funding from PacifiCan&apos;s economic development programs.",
				"type": "kml",
				"url": "demo/BusinessScaleProductivity_en.kml",
				"datatable": true,
				"attributes": {
					"Program": "Program",
					"Project": "Project"
				},
				"style": {
					"type": "unique",
					"field": "Program",
					"init": {
						"Business Scale Up": {
							"externalGraphic": "",
							"graphicOpacity": "1",
							"graphicWidth": "32",
							"graphicHeight": "32"
						},
						"Business Productivity": {
							"externalGraphic": "",
							"graphicOpacity": "1",
							"graphicWidth": "32",
							"graphicHeight": "32"
						}
					}
				}
			},
			{
				"title": "Regional Innovation Ecosystems",
				"caption": "This interactive map shows projects across B.C. that received funding from PacifiCan&apos;s economic development programs.",
				"type": "kml",
				"url": "demo/RegionalInnovationEcosystem_en.kml",
				"datatable": true,
				"attributes": {
					"Program": "Program",
					"Project": "Project"
				},
				"style": {
					"type": "unique",
					"field": "Program",
					"init": {
						"Regional Innovation Ecosystems": {
							"externalGraphic": "",
							"graphicOpacity": "1",
							"graphicWidth": "32",
							"graphicHeight": "32"
						}
					}
				}
			},
			{
				"title": "CEDD (formerly known as WDP)",
				"caption": "This interactive map shows projects across B.C. that received funding from PacifiCan&apos;s economic development programs.",
				"type": "kml",
				"url": "demo/WesternDiversificationProgram_en.kml",
				"datatable": true,
				"attributes": {
					"Program": "Program",
					"Project": "Project"
				},
				"style": {
					"type": "unique",
					"field": "Program",
					"init": {
						"CEDD (formerly known as WDP)": {
							"externalGraphic": "",
							"graphicOpacity": "1",
							"graphicWidth": "32",
							"graphicHeight": "32"
						}
					}
				}
			}
		]
	}'>
		<div class="wb-geomap-map mrgn-bttm-lg"></div>
		<div class="panel panel-default">
			<header class="panel-heading">
				<h3 class="panel-title">Legend</h3>
			</header>
			<div class="panel-body">
				<p class="”h4”"><strong>Select from following PacifiCan programs to see funded projects across British Columbia:</strong></p>
				<div class="wb-geomap-legend"></div>
			</div>
		</div>
		<div class="wb-geomap-layers"></div>
	</div>
</section>

<section id="topojson_select">
	<h2>TopoJSON with select style and popup</h2>
	<div class="wb-geomap legend-label-only" id="geomap_topojson" data-wb-geomap='{
		"mapExtent": "78, -105, 44, -75",
		"caption": "List of all Canadian provinces and territories and their population",
		"overlays": [
			{
				"title": "Canadian provinces (TopoJSON)",
				"type": "topojson",
				"url": "demo/provinces_en.json",
				"datatable": true,
				"tooltips": true,
				"popups": true,
				"attributes": {
					"PROVINCE": "Province",
					"POPULATION": "Population"
				},
				"style": {
					"strokeColor": "rgba(255,0,0,0.5)",
					"strokeWidth": 2.0,
					"fillColor": "rgba(255,0,0,0.1)",
					"select": {
						"strokeColor": "rgba(255,0,0,0.8)",
						"fillColor": "rgba(255,0,0,0.5)"
					}
				}
			}
		]
	}'>
		<div class="row mrgn-bttm-lg">
			<div class="col-xs-12 col-md-9">
				<div class="wb-geomap-map"></div>
			</div>
			<div class="col-xs-12 col-md-3">
				<div class="panel panel-default">
					<header class="panel-heading">
						<h3 class="panel-title">Legend</h3>
					</header>
					<div class="panel-body">
						<div class="wb-geomap-legend"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="wb-geomap-layers"></div>
	</div>

	<h3>Code</h3>
	<details>
		<summary>View code</summary>
		<pre><code>&lt;div class="wb-geomap legend-label-only" id="geomap_topojson" data-wb-geomap='{
	"mapExtent": "78, -105, 44, -75",
	"caption": "List of all Canadian provinces and territories and their population",
	"overlays": [
		{
			"title": "Canadian provinces (TopoJSON)",
			"type": "topojson",
			"url": "demo/provinces_en.json",
			"datatable": true,
			"tooltips": true,
			"popups": true,
			"attributes": {
				"PROVINCE": "Province",
				"POPULATION": "Population"
			},
			"style": {
				"strokeColor": "rgba(255,0,0,0.5)",
				"strokeWidth": 2.0,
				"fillColor": "rgba(255,0,0,0.1)",
				"select": {
					"strokeColor": "rgba(255,0,0,0.8)",
					"fillColor": "rgba(255,0,0,0.5)"
				}
			}
		}
	]
}'>
	&lt;div class="row mrgn-bttm-lg">
		&lt;div class="col-xs-12 col-md-9">
			&lt;div class="wb-geomap-map">&lt;/div>
		&lt;/div>
		&lt;div class="col-xs-12 col-md-3">
			&lt;div class="panel panel-default">
				&lt;header class="panel-heading">
					&lt;h3 class="panel-title">Legend&lt;/h3>
				&lt;/header>
				&lt;div class="panel-body">
					&lt;div class="wb-geomap-legend">&lt;/div>
				&lt;/div>
			&lt;/div>
		&lt;/div>
	&lt;/div>
	&lt;div class="wb-geomap-layers">&lt;/div>
&lt;/div></code></pre>
	</details>
</section>
